{% extends "base.html" %}

{% block subtitle %}
  Gallery
{% endblock subtitle %}

{% block content %}
  <div ng-controller="Gallery">

    <div class="oppia-content">
      <div class="oppia-gallery-frame">

        <h3 class="oppia-page-title">
          <[getHeadingText()]>
          {% if user %}
            <div class="pull-right">
              <button class="btn" ng-click="toggleExplorationView()">
                <[getToggleText()]>
              </button>
            </div>
          {% endif %}
        </h3>

        <div class="tabbable tabs-left" ui-if="categories">
          <ul class="nav nav-tabs" id="navTabs">
            <li ng-repeat="(category, explorations) in categories" ng-class="{active: $index == 0}">
              <a data-toggle="tab" href="#<[category|spacesToUnderscores]>">
                <[category]>
              </a>
            </li>
          </ul>
          <div class="tab-content">
            <div ng-repeat="(category, explorations) in categories" class="tab-pane" ng-class="{active: $index == 0}" id="<[category|spacesToUnderscores]>">
              <div class="container-fluid">
                <div class="row-fluid">

                  <div class="oppia-gallery-block">
                    <div ng-repeat="exploration in explorations | filter: canViewExploration" class="oppia-gallery-box">
                      <div>
                        <center>
                          <a href="/learn/<[exploration.id]>">
                            <span ui-if="exploration.image_id">
                              <img ng-src="/imagehandler/<[exploration.image_id]>"
                                   class="oppia-large-image">
                              <h5 class="oppia-gallery-title"><[exploration.title]></h5>
                            </span>
                            <span ng-hide="exploration.image_id">
                              <center>
                                <h4 class="oppia-gallery-title"><[exploration.title]></h4>
                              </center>
                            </span>
                          </a>
                        </center>

                        <center>
                          <div>
                            <span ui-if="exploration.can_fork">
                              <a ng-click="forkExploration(exploration.id)">
                                <i class="icon-share oppia-icon" title="Copy this exploration">
                                </i>
                                <span class="oppia-small-font">Copy</span>
                              </a> |
                            </span>
                            <span ui-if="exploration.can_edit">
                              <a href="/create/<[exploration.id]>">
                                <i class="icon-pencil" title="Edit this exploration"></i>
                                <span class="oppia-small-font">Edit</span>
                              </a> |
                            </span>
                            <a ng-click="showEmbedModal(exploration.id)">
                              <i class="icon-share-alt" title="Embed this exploration"></i>
                              <span class="oppia-small-font">Embed</span>
                            </a>
                          </div>
                        </center>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>

        <br>
        <br>

        {% if user %}
          <p>
            <a class="btn btn-large" ng-click="openNewExplorationModal()">
              Create New Exploration
            </a>
          </p>
        {% else %}
          <h4>
            To create new explorations or edit existing ones, you must <a href="{{login_url}}">log in</a>.
          </h4>
        {% endif %}

      </div>
    </div>


    {% if user %}
      <form novalidate name="createNewExplorationForm" ng-submit="createNewExploration()" class="oppia-form">
        <div class="modal hide fade" id="newExplorationModal" ng-model="createModalShown">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h3 id="customizeModalLabel">
              Add New Exploration <img class="oppia-help" src="/images/help.png" ui-jq="tooltip"
              title="This form allows you to add new explorations.
              Enter the title of your exploration, as well as the Gallery page category it should fall under (e.g. languages, music).">
            </h3>
          </div>
          <div class="modal-body">
            <div>
              Title: <input type="text" ng-model="newExplorationTitle" name="newExplorationTitle" autofocus required>
            </div>

            <div>
              Category:
              <select ng-model="newExplorationCategory" required
                      ng-options="getCategoryName(category) for category in getCategoryList()">
              </select>

              <input ng-model="customExplorationCategory"
                     ng-show="newExplorationCategory == '?'" type="text"
                     ng-required="newExplorationCategory == '?'">
            </div>

            <br>

            {% if allow_yaml_file_upload %}
              <label>
                (Optional) Upload an existing exploration (YAML file)?
                <input type="checkbox" ng-model="includeYamlFile">
              </label>
              <div ng-show="includeYamlFile">
                Upload file:
                <input id="newFileInput" type="file" file-upload="true">
              </div>
            {% endif %}
          </div>

          <div class="modal-footer">
            <input type="submit" class="btn" value="Save"
                   ng-disabled="createNewExplorationForm.$invalid">
            <a class="btn" data-dismiss="modal" ng-click="closeNewExplorationModal()">Close</a>
          </div>
        </div>
      </form>
    {% endif %}

    <div class="modal hide fade" id="embedModal" ng-model="embedModalShown">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h3 id="embedModalLabel">Embed this exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          You can embed this exploration in a webpage by copying and pasting
          the following code snippet into the webpage's HTML:
        </p>
        <code>
          &lt;iframe src="<[root]>/learn/<[currentId]>?iframed=true" width="100%" height="400px" frameborder="0"&gt;
          &lt;/iframe&gt;
        </code>

        <br><br>

        <p ng-show="isDemoServer()">
          <strong style="color: red">Warning</strong>: This version of Oppia runs on a demo server that may go down at any time. If you want to link to Oppia explorations from a different webpage, we strongly suggest that you <a href="https://code.google.com/p/oppia/wiki/GettingStarted">set up your own server</a>. If you have permission to edit this exploration, you can also download it from this server by clicking the download icon in the top-right of the exploration editor page, and then upload that file to your own server.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('gallery/Gallery.js') }}
  </script>
{% endblock footer_js %}
